<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
      <div id="q1">
        <ul>
            <li @click="quwwe='psdi'">首页</li>
            <li @click="quwwe='psdi1'">中部</li>
        </ul>
            <component v-bind:is="quwwe"></component>
   
      </div>
<script>
   
 var psdia={
     template:'<div>{{msas}}</div>',
     data:function(){
         return {msas:'bvsvidubis'}
     }
 }  

    
 var psdi1={
     template:'<div>qdqwd <input type="text"/></div>'
 }
      var q1 = new Vue({
        el: '#q1',
        data: {
            quwwe:'psdi',
        },
        components:{
         
          'psdi':psdia,
          'psdi1':psdi1,
        }
      })


</script>
</body>
</html>